<template>
  <div class="app-container">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <el-button @click="goBack">返回列表</el-button>
        </div>
      </template>
      <div class="info-container">
        <!-- 用户头像（正方形大图） -->
        <div class="info-section">
          <div v-if="detail.userAvatar" class="main-image-container">
            <img :src="detail.userAvatar" class="main-image" alt="用户头像" />
          </div>
          <div class="basic-info">
            <h3>{{ detail.strategyName }}</h3>
            <p class="author">发表人: {{ detail.userName }}</p>
            <p class="publish-time">发表时间: {{ formatDate(detail.modificationTime) }}</p>
          </div>
        </div>
        
        <!-- 详细信息分组 -->
        <div class="detail-info">
          <el-descriptions :column="1" border>
            <el-descriptions-item label="景点名称">{{ detail.scenic_area_name }}</el-descriptions-item>
            <el-descriptions-item label="省份">{{ detail.province }}</el-descriptions-item>
          </el-descriptions>
        </div>
        <!-- 攻略内容 -->
        <div class="content-section" v-if="detail.strategyContent">
          <h4>攻略内容</h4>
          <div class="content-text">{{ detail.strategyContent }}</div>
        </div>
        <!-- 图片预览 -->
        <div class="image-section" v-if="images.length">
          <h4>图片</h4>
          <el-carousel :interval="4000" type="card" height="200px" v-viewer="viewerOptions">
            <el-carousel-item v-for="img in images" :key="img.strategyImageId">
              <img :src="img.strategyImageLink" style="width:100%;height:100%;object-fit:cover;border-radius:12px;box-shadow:0 2px 8px #e0e7ef;cursor:pointer;" alt="攻略图片" />
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { fetchStrategyDetail } from '../../../api/strategy'

const route = useRoute()
const router = useRouter()
const detail = ref({})
const images = ref([])
const mainImage = ref('')

const viewerOptions = {
  toolbar: true,
  navbar: true,
  title: true,
  movable: true,
  zoomable: true,
  rotatable: true,
  scalable: true,
  fullscreen: true,
  transition: true,
}

function formatDate(val) {
  if (!val) return ''
  const d = new Date(val)
  if (isNaN(d.getTime())) return 'Invalid Date'
  return d.getFullYear() + '-' + String(d.getMonth()+1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0') +
    ' ' + String(d.getHours()).padStart(2, '0') + ':' + String(d.getMinutes()).padStart(2, '0') + ':' + String(d.getSeconds()).padStart(2, '0')
}

function goBack() {
  router.push({ name: 'StrategyList' })
}

async function loadDetail() {
  try {
    const res = await fetchStrategyDetail(route.params.id)
    detail.value = res.data.detail || {}
    images.value = res.data.images || []
    mainImage.value = images.value.length ? images.value[0].strategyImageLink : ''
  } catch (e) {
    ElMessage.error('获取攻略详情失败')
  }
}

onMounted(() => {
  loadDetail()
})
</script>

<style scoped>
/* 头像和主图都用 main-image-container 和 main-image 样式，保持风格一致 */
.main-image-container {
  margin-right: 30px;
  margin-bottom: 20px;
}
.main-image {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 2px 8px #e0e7ef;
}
.app-container {
  padding: 20px;
}
.box-card {
  max-width: 900px;
  margin: 0 auto;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.card-title {
  font-size: 18px;
  font-weight: bold;
}
.info-container {
  padding: 20px;
}
.info-section {
  display: flex;
  align-items: flex-start;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}
.basic-info {
  height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.basic-info h3 {
  margin: 0;
  font-size: 26px;
  line-height: 1.1;
}
.author, .publish-time {
  margin: 0;
  color: #888;
  font-size: 16px;
  line-height: 1.2;
}
.detail-info {
  margin-bottom: 30px;
}
.content-section {
  margin-top: 30px;
}
.content-section h4 {
  margin-bottom: 10px;
  font-size: 16px;
  color: #333;
}
.content-text {
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 4px;
  line-height: 1.7;
  word-break: break-all;
  white-space: pre-line;
}
.image-section {
  margin-top: 30px;
}
.image-section h4 {
  margin-bottom: 10px;
  font-size: 16px;
  color: #333;
}
.image-list {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.strategy-image {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 2px 8px #e0e7ef;
  cursor: pointer;
}
@media (max-width: 600px) {
  .info-section {
    flex-direction: column;
    align-items: flex-start;
  }
  .main-image-container {
    margin-right: 0;
    margin-bottom: 15px;
  }
  .main-image {
    width: 80px;
    height: 80px;
  }
}
</style>